<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立体门式侧栏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Microsoft YaHei', sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        overflow-x: hidden;
      }

      .container {
        display: flex;
        min-height: 100vh;
        perspective: 1200px;
      }

      .sidebar {
        width: 280px;
        background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid #dee2e6;
      }

      /* 左侧栏 - 向右旋转打开 */
      .sidebar-left {
        transform-origin: left center;
        transform: perspective(1000px) rotateY(-12deg);
        border-right: 4px solid #adb5bd;
        box-shadow: inset -8px 0 16px rgba(0, 0, 0, 0.1), 8px 0 24px rgba(0, 0, 0, 0.2);
        background: linear-gradient(to right, #f8f9fa 0%, #f1f3f4 30%, #e9ecef 70%, #dee2e6 100%);
      }

      /* 右侧栏 - 向左旋转打开 */
      .sidebar-right {
        transform-origin: right center;
        transform: perspective(1000px) rotateY(12deg);
        border-left: 4px solid #adb5bd;
        box-shadow: inset 8px 0 16px rgba(0, 0, 0, 0.1), -8px 0 24px rgba(0, 0, 0, 0.2);
        background: linear-gradient(to left, #f8f9fa 0%, #f1f3f4 30%, #e9ecef 70%, #dee2e6 100%);
      }

      /* 悬停效果 */
      .sidebar-left:hover {
        transform: perspective(1000px) rotateY(-20deg);
        box-shadow: inset -12px 0 20px rgba(0, 0, 0, 0.15), 12px 0 32px rgba(0, 0, 0, 0.3);
      }

      .sidebar-right:hover {
        transform: perspective(1000px) rotateY(20deg);
        box-shadow: inset 12px 0 20px rgba(0, 0, 0, 0.15), -12px 0 32px rgba(0, 0, 0, 0.3);
      }

      /* 门把手效果 */
      .door-handle {
        position: absolute;
        width: 12px;
        height: 60px;
        background: linear-gradient(to bottom, #ffd700, #ffb347);
        border-radius: 6px;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5);
        border: 1px solid #e6ac00;
      }

      .sidebar-left .door-handle {
        right: 20px;
      }

      .sidebar-right .door-handle {
        left: 20px;
      }

      /* 侧栏内容 */
      .sidebar-content {
        padding: 30px 20px;
        height: 100%;
      }

      .sidebar h3 {
        color: #495057;
        margin-bottom: 20px;
        font-size: 18px;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
      }

      .menu-item {
        display: block;
        padding: 12px 16px;
        color: #6c757d;
        text-decoration: none;
        border-radius: 8px;
        margin-bottom: 8px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.5);
      }

      .menu-item:hover {
        background: rgba(255, 255, 255, 0.6);
        color: #495057;
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      /* 主内容区域 */
      .main-content {
        flex: 1;
        background: rgba(255, 255, 255, 0.95);
        margin: 20px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
      }

      .content-text {
        text-align: center;
        color: #495057;
      }

      .content-text h1 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .content-text p {
        font-size: 1.2rem;
        line-height: 1.6;
        opacity: 0.8;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .sidebar {
          width: 240px;
        }

        .sidebar-left {
          transform: perspective(800px) rotateY(-8deg);
        }

        .sidebar-right {
          transform: perspective(800px) rotateY(8deg);
        }
      }

      /* 添加一些装饰元素 */
      .sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.8) 0%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(0, 0, 0, 0.1) 100%
        );
      }

      .sidebar-left::before {
        right: 0;
      }

      .sidebar-right::before {
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 左侧栏 -->
      <nav class="sidebar sidebar-left">
        <div class="door-handle"></div>
        <div class="sidebar-content">
          <h3>导航菜单</h3>
          <a href="#" class="menu-item">🏠 首页</a>
          <a href="#" class="menu-item">📊 数据分析</a>
          <a href="#" class="menu-item">📈 统计报表</a>
          <a href="#" class="menu-item">⚙️ 系统设置</a>
          <a href="#" class="menu-item">👤 用户管理</a>
          <a href="#" class="menu-item">🔒 权限管理</a>
          <a href="#" class="menu-item">📝 日志记录</a>
        </div>
      </nav>

      <!-- 主内容区域 -->
      <main class="main-content">
        <div class="content-text">
          <h1>立体门式侧栏</h1>
          <p>
            这是一个具有3D立体效果的侧栏设计<br />
            鼠标悬停在侧栏上可以看到更明显的开门效果<br />
            使用了CSS 3D变换、渐变和阴影技术
          </p>
        </div>
      </main>

      <!-- 右侧栏 -->
      <aside class="sidebar sidebar-right">
        <div class="door-handle"></div>
        <div class="sidebar-content">
          <h3>快捷工具</h3>
          <a href="#" class="menu-item">📋 待办事项</a>
          <a href="#" class="menu-item">📅 日程安排</a>
          <a href="#" class="menu-item">💬 消息通知</a>
          <a href="#" class="menu-item">🔍 搜索功能</a>
          <a href="#" class="menu-item">📁 文件管理</a>
          <a href="#" class="menu-item">🔧 常用工具</a>
          <a href="#" class="menu-item">❓ 帮助中心</a>
        </div>
      </aside>
    </div>
  </body>
</html>
